<template>
	<view>
		<view class="info-box">
			<view class="info-each">
				<view class="">姓名</view>
				<view class="input">
					<input v-model="name" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">身份证号</view>
				<view class="input">
					<input v-model="idcard" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">手机号</view>
				<view class="input">
					<input v-model="mobile" type="number" placeholder="请输入" />
				</view>
			</view>
		</view>
		
		<view style="height: 24rpx;width: 1rpx;"></view>
		<view @click="nearby" class="address">{{info.address}}</view>
		
		<view class="btn" @click="save">提交</view>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	const chooseLocation = requirePlugin('chooseLocation');
	// #endif
	
	// #ifdef APP
	import permision from "@/js_sdk/wa-permission/permission.js"
	// #endif
export default {
	data() {
		return {
			name:'',
			idcard:'',
			mobile:'',
			info:{
				address:'选择位置'
			}
		};
	},
	mounted() {
		let that = this
		// #ifdef APP
		
		uni.$on('selectAddress', function(data) {
			console.log(data)
			that.info.province = data.province
			that.info.city = data.city
			that.info.district = data.district
			that.info.lng = data.location.longitude
			that.info.lat = data.location.latitude
			that.info.address = data.address + data.name
			this.amendAddress()
			// this.address()
		})
		// #endif
	},
	onShow() {
		this.getInfo()
		// #ifdef MP-WEIXIN
		const locations = chooseLocation.getLocation();
		console.log(locations)
		if (locations) {
			this.info.address = locations.name
			this.info.province = locations.province
			this.info.city = locations.city
			this.info.district = locations.district
			this.info.lat = locations.latitude
			this.info.lng = locations.longitude
			this.amendAddress()
		}
		// #endif
	},
	methods: {
		getInfo(){
			uni.$u.http.post('/ident').then(res => {
				if (res.code === 1) {
					this.name = res.data.name
					this.idcard = res.data.idcard,
					this.mobile = res.data.mobile
				}
			}).catch((res) => {
					
			})
		},
		save() {
			if(this.name === '' ) {
				this.$u.toast('请输入姓名');
				return
			}
			if(this.idcard === '' ) {
				this.$u.toast('请输入身份证号');
				return
			}
			if(!uni.$u.test.mobile(this.mobile)) {
				this.$u.toast('请输入正确的手机号');
				return
			}
			if(this.info.address == '选择位置' ) {
				this.$u.toast('请选择位置');
				return
			}
			uni.$u.http.post('/ident', {
				type: 'send',
				name:this.name,
				idcard:this.idcard,
				mobile:this.mobile
			}).then(res => {
				if (res.code === 1) {
					this.$u.toast(res.msg);
					setTimeout(() => {
						this.back()
					},1000)
				}
			}).catch((res) => {
		
			})
		},
		
		//修改位置信息
		amendAddress(){
			uni.$u.http.post('/updateplusinfo',this.info).then(res => {
				if (res.code == 1) {
					this.$u.toast(res.msg);
				}
			}).catch((res) => {
			
			})
		},
		nearby() {
			// #ifdef MP-WEIXIN
			const key = 'LNWBZ-4DTKU-JQCVV-23LKL-4GM2V-2RBQI'; //使用在腾讯位置服务申请的key
			const referer = '跑腿'; //调用插件的app的名称
			let location;
			if (this.info.lat) {
				location = JSON.stringify({
					latitude: this.info.lat,
					longitude: this.info.lng
				});
			} else {
				location = ''
			}
			console.log(location)
			const category = '';
		
			wx.navigateTo({
				url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' +
					location + '&category=' + category
			});
			// #endif
		
			// #ifdef APP
		
			let allow = permision.checkSystemEnableLocation()
			if (allow) {
				uni.$u.route({
					url: 'pages/my/map'
				})
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '请打开手机位置信息或点击下方确定开启APP权限中的位置信息',
					success: function(res) {
						if (res.confirm) {
							permision.gotoAppPermissionSetting()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
			// #endif
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}
.info-box {
	width: 622rpx;
	padding: 29rpx 32rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	margin: auto;

	.info-each {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;

		.input {
			display: flex;
			align-items: center;
			text-align: right;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;

			text {
				display: inline-block;
				padding-left: 30rpx;
			}
		}

		image {
			width: 32rpx;
			height: 32rpx;
			position: relative;
			top: 7rpx;
			left: 20rpx;
		}
		.tint {
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	.upimg {
		margin-top: 30rpx;
	}

	.wire {
		width: 622rpx;
		height: 1rpx;
		background-color: #f0f0f0;
		margin: auto;
		margin: 30rpx 0;
	}

	.tags-box {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		.tags {
			display: flex;
			margin-top: 24rpx;
			.tag {
				background-color: #f6f6f6;
				font-size: 30rpx;
				padding: 19rpx 48rpx 19rpx 24rpx;
				font-weight: 500;
				color: #333333;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 24rpx;
				image {
					width: 30rpx;
					height: 30rpx;
					position: relative;
					top: 7rpx;
					left: 20rpx;
				}
			}
		}
	}

	.introduce-box {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		.textarea-box {
			padding: 24rpx 0;
			height: 180rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}

.address {
	width: 658rpx;
	height: 100rpx;
	background: #FFF;
	border-radius: 20rpx;
	margin: auto;
	padding: 0 24rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #A4A9B7;
	line-height: 100rpx;
}

.btn {
		width: 622rpx;
		height: 88rpx;
		background: #febf4e;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		margin: auto;
		font-size: 28rpx;
		text-align: center;
		font-weight: 500;
		color: #333333;
		line-height: 88rpx;
		margin-top: 48rpx;
	}
</style>
